<template>
    <li
            :class="['tab-item', {current: index === tabIndex}]"
            @click="changTabIndex"
    >
        {{message}}
    </li>
</template>

<script>
    export default {
        name: "Item",
        props: {
            tabIndex: Number,
            index: Number,
            message: String
        },
        setup(props, context) {
            const changTabIndex = () => {
                context.emit('changTabIndex', props.index)
            }

            return {
                changTabIndex
            }
        }
    }
</script>

<style scoped>

</style>